<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">对比列表</block>
		</cu-custom>
		<view class="padding">
			<checkbox-group class="block" @change="checkboxChange">
				<view class="cu-list menu-avatar">
					<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''"
						v-for="(item,index) in compareList" :key="index" @touchstart="ListTouchStart"
						@touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index">
						<checkbox class='checkbox round blue' :class="item.checked?'checked':''" :value="item.compareName"
							:checked="item.checked" />
						<view class="content">
							<view class="text-bold">{{ item.compareName }}</view>
							<view class="text-gray text-xs">
								<text class="margin-right-sm">工资：{{ item. socialSecurityBasicAmount}}</text>
								<text class="margin-right-sm">社保基数：{{ item. socialSecurityBasicAmount}}</text>
								<text class="margin-right-sm">公积金基数：{{ item. socialSecurityBasicAmount}}</text>
							</view>
						</view>
						<view class="move">
							<view class="bg-red" @tap="del" :data-compare-name="item.compareName">删除</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="cu-bar foot">
			<button class="cu-btn round bg-blue lg" @tap="startCompare">开始对比</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null,
				compareList: []
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				const storageCompareList = uni.getStorageSync('storage_compareList');
				if (storageCompareList === null || storageCompareList === '') {
					return
				}
				const compareList = []
				for (const key in storageCompareList) {
					const curCompareItem = storageCompareList[key]
					compareList.push({
						compareName: key,
						totalAmount: curCompareItem.totalAmount,
						housingFundBasicAmount: curCompareItem.housingFundInfo.basicAmount,
						socialSecurityBasicAmount: curCompareItem.socialSecurityInfo.basicAmount,
						checked: false
					})

				}
				this.compareList = compareList
			},
			del(e) {
				// 当前列表也删除
				const delCompareName = e.currentTarget.dataset.compareName
				this.compareList = this.compareList.filter(item => item.compareName !== delCompareName)
				// 缓存删除
				let storageCompareList = uni.getStorageSync('storage_compareList');
				delete storageCompareList[delCompareName]
				uni.setStorageSync('storage_compareList', storageCompareList)
			},
			checkboxChange(e) {
				var compareList = this.compareList,
					values = e.detail.value;
				for (var i = 0, lenI = compareList.length; i < lenI; ++i) {
					const compareItem = compareList[i]
					if (values.includes(compareItem.compareName)) {
						this.$set(compareItem, 'checked', true)
					} else {
						this.$set(compareItem, 'checked', false)
					}
				}
			},
			startCompare() {
				const compareItemChecked = this.compareList.filter(item => item.checked === true)
				if (compareItemChecked === null) {
					uni.showToast({
						title: '最少选择一个对比项',
						icon: 'none'
					})
					return;
				}
				const compareNameCheckeds = encodeURIComponent(JSON.stringify(compareItemChecked.map(item => item.compareName)))
				uni.navigateTo({
					url: 'compareResult?compareNameCheckeds=' + compareNameCheckeds
				})
			},
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			}
		}
	}
</script>

<style scoped>
	.cu-list>.cu-item .move {
		width: 130upx;
	}
	
	.cu-list>.cu-item.move-cur {
		-webkit-transform: translateX(-130upx);
		transform: translateX(-130upx);
	}
	
	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 112upx;
		width: calc(100% - 112upx);
	}
	
	.cu-list.menu-avatar>.cu-item>.checkbox {
		position: absolute;
		left: 15px;
	}
	
	.cu-list.menu-avatar>.cu-item>.checkbox {
		position: absolute;
		left: 15px;
	}
	
	.cu-bar .cu-btn {
		width: 100%;
		margin: 0 30upx;
	}
	
	.cu-bar.foot {
		box-shadow: initial;
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}
	
	.cu-list>.cu-item {
		transition: all .3s ease-in-out 0s;
	}
	
</style>